<template>
  <div
      style="     -ms-overflow-style: none;"
      :style="{ left: `${x}px`, top: `${y}px` }"
      aria-readonly="true"
      class="float-ball"
      @dblclick="toggleCard"
      @mousedown="startDrag"
  >
    <span class="float-ball-content">问 AI</span>
  </div>
  <el-card v-if="showCard" :style="{ left: `${cardX}px`, top: `${cardY}px` }" aria-readonly="true" class="card">
    <el-header class="card-header">
      <span style="margin-left: 5px">新苗系统AI智能问答助手</span>
      <el-button class="close-btn" @click="toggleCard">
        <el-icon>
          <Failed/>
        </el-icon>
      </el-button>
    </el-header>
    <div class="chat-container">
      <el-container ref="content"   id="scroll">
        <el-main class="chat-messages">
          <div
              v-for="(message, index) in messages"
              :key="index"
              class="chat-message"
              :class="{ 'user-message': message.role === 'user', 'assistant-message': message.role === 'assistant' }"
          >
            {{ message.content }}
          </div>
        </el-main>
        <el-footer class="chat-input">
          <el-input
              v-model="inputText"
              @keyup.enter="sendMessage"
              placeholder="Type a message..."
          />
          <el-button type="primary" @click="sendMessage">Send</el-button>
        </el-footer>
      </el-container>
    </div>
  </el-card>
</template>

<script>
import {Failed, Hide} from "@element-plus/icons-vue";

export default {
  components: {
    Failed,
    Hide
  },
  data() {
    return {
      x         : 1750,
      y         : 550,
      dragging  : false,
      showCard  : false,
      userInput : '',
      messages  : [],
      messageId : 0,
      isReplying: false,
      inputText : '',
      apiUrl    : "https://open.bigmodel.cn/api/paas/v4/chat/completions",
      apiKey    : "67ab2a490cf0ddf2f1091bfebb18af5c.Jdt5IspiACxyYtyn"
    };
  },
  computed: {

    cardX() {
      const cardWidth = 300;
      const windowWidth = window.innerWidth;
      return this.x + 60 > windowWidth - cardWidth ? windowWidth - cardWidth - 10 : this.x + 60;
    },
    cardY() {
      return this.y + 60;
    }
  },
  methods : {
    sendMessage() {
      if (this.inputText.trim() === '') return;
      this.addMessage('user', this.inputText);
      this.callZhiPuAPI(this.inputText);
      this.inputText = '';
      this.scrollToBottom();
    },
    scrollToBottom() {

    },
    callZhiPuAPI(inputText) {
      this.isReplying = true;
      this.$http.post(this.apiUrl, {
        model   : "glm-4-plus",
        messages: [{
          role   : "user",
          content: inputText
        }]
      }, {
        headers: {
          'Authorization': 'Bearer ' + this.apiKey,
          'Content-Type' : 'application/json'
        }
      }).then(response => {
        if (response.status === 200) {
          console.log(response)
          const assistantResponse = response.data.choices[0].message.content;
          this.addMessage('assistant', assistantResponse);
        } else {
          console.error('Failed to call GLM-4 API');
        }
        this.isReplying = false;
      }).catch(error => {
        console.error('API call failed', error);
        this.isReplying = false;
      });
    },
    addMessage(role, content) {
      this.messages.push({
        role,
        content
      });
    },
    startDrag(e) {
      this.dragging = true;
      let startX = e.clientX;
      let startY = e.clientY;
      let deltaX = startX - this.x;
      let deltaY = startY - this.y;

      const move = (e) => {
        if (this.dragging) {
          this.x = e.clientX - deltaX;
          this.y = e.clientY - deltaY;
        }
      };

      const stopDrag = () => {
        this.dragging = false;
        document.removeEventListener('mousemove', move);
        document.removeEventListener('mouseup', stopDrag);
      };

      document.addEventListener('mousemove', move);
      document.addEventListener('mouseup', stopDrag);
    },
    toggleCard() {
      this.showCard = !this.showCard;
    },
  },
};
</script>

<style scoped>

.chat-container {
  -ms-overflow-style: none;
  width: 100%;
  max-width: 600px;
  margin: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.chat-messages {
  margin-right: -60px;
  height: 400px;
  overflow-y: auto;
  padding: 10px;
  background-color: #f5f5f5;
}

.chat-message {
  margin: 5px 0;
  padding: 5px;
  border-radius: 5px;
  max-width: 80%;
}

.user-message {
  text-align: right;
  background-color: #c8e6c9;
}

.assistant-message {
  text-align: left;
  background-color: #e3f2fd;
}

.chat-input {
  display: flex;
  align-items: center;
  padding: 10px;
}

.chat-input input {
  flex-grow: 1;
  margin-right: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.chat-input button {
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  background-color: #2196f3;
  color: white;
  cursor: pointer;
}

.chat-input button:hover {
  background-color: #1976d2;
}

.float-ball {
  width: 60px;
  height: 60px;
  background: linear-gradient(to right, #864ee8 25%, #9c26c5);;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  position: fixed;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  font-weight: bold;
  font-size: 16px;
}

.float-ball-content {
  display: block;
  width: 100%;
  height: 100%;
}

.float-ball:hover {
  transform: scale(1.1);
}

.card {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  background: linear-gradient(135deg, #6dd5ed 0%, #2193b0 100%);
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 1001;
}

.card-header {
  background: linear-gradient(to right, #11ff9e 25%, #0e38ea);
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 10px;
  min-width: 330px;
  margin: -20px 0 0 -20px;
  font-size: 22px;
  font-weight: bold;
}

.message strong {
  margin-right: 5px;
}


.close-btn {
  margin-top: 2px;
  margin-left: 20px;
  background: none;
  border: none;
  padding: 0;
  max-width: 60px;
  color: white;
  cursor: pointer;
  font-size: 18px;
}

.close-btn:hover {
  font-size: 30px;
}
</style>
